<div page-header="Manage users" class="row spacing-bottom-md">
    <div class="col-sm-3">
        <select class="form-control" ng-options="role as role.text for role in roles track by role.value" ng-model="selectedRole" ng-change="search(selectedRole)"></select>
    </div>
    <div class="col-sm-3">
        <button class="btn btn-info" ng-click="openNewUserDialog()">New user</button>
    </div>
</div>

<table ng-table="tableParams" style="table-layout:fixed;" class="table table-user table-hover table-bordered ng-table-resizable-columns" ng-visible="$data.length">
    <thead>
        <tr class="row">
            <th class="col-xs-2">Full Name</th>
            <th class="col-xs-2">User Name</th>
            <th class="col-xs-2">Position</th>
            <th class="col-xs-2">Mobile</th>
            <th class="col-xs-2">Phone</th>
            <th class="col-xs-2">Email</th>
            <th style="width: 9%;">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in $data" class="row">
            <td>
                <a href="#" e-required editable-text="item.fullName" onaftersave="updateUser(item)" >{{item.fullName}}</a>
            </td>
            <td>
                <a href="#" e-required editable-text="item.userName" onaftersave="updateUser(item)" ng-disabled="item.id == currentUserId">{{item.userName}}</a>
            </td>
            <td>
                <a href="#" editable-select="item.role" e-ng-options="s as s.text for s in roles" onaftersave="updateUser(item)" ng-disabled="item.id == currentUserId">{{item.role.text}}</a>
            </td>
            <td>
                <a href="#" editable-text="item.mobile" onaftersave="updateUser(item)">{{item.mobile}}</a>
            </td>
            <td>
                <a href="#" editable-text="item.tel" onaftersave="updateUser(item)">{{item.tel}}</a>
            </td>
            <td>
                <a href="mailto://{{item.email}}" editable-email="item.email" onaftersave="updateUser(item)">{{item.email}}</a>
            </td>
            <td class="text-center">
                <div class="btn-group" dropdown>
                    <button type="button" ng-disabled="item.id == currentUserId" class="btn {{item.activate ? 'btn-info' : 'btn-danger'}} dropdown-toggle">
                        {{ item.activate ? 'Active' : 'Inactive' }} <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a ng-click="open(item)">Change Pass</a></li>
                        <li><a busy-click="item.activate = !item.activate; updateUser(item)">{{ item.activate ? 'Deactivate' : 'Activate' }}</a></li>
                    </ul>
                </div>
            </td>
        </tr>
    </tbody>
</table>

<script type="text/ng-template" id="changePass.html">
    <div class="modal-body">
        <div class="row">
            <div class="col-sm-12 spacing-bottom-sm">
                <input class="form-control" type="password" ng-model="newPassword" placeholder="New Password" />
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <input class="form-control" type="password" ng-model="confirmPassword" placeholder="Confirm Password" />
            </div>
        </div>

    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok(newPassword)" ng-disabled="!newPassword || !confirmPassword || newPassword != confirmPassword">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
</script>

<div ng-show="!tableParams.settings().$loading && tableParams.data.length === 0" class="well text-center">No result</div>